<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="标识" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="contentBox">
			<view class="noData" v-show="!labelData.length">
				<image src="../../static/images/label-noData.png"></image>
				<text>暂无数据</text>
			</view>
			<view class="tableData" v-show="labelData.length">
				<view 
					class="itemBox"
					v-for="(item) in labelData"
					:key="item.id"
				>
					<view class="detailsBox">
						<text 
							:class="{labelRectangle:item.type == 'rectangle',labelRound:item.type == 'round'}"
							:style="{borderColor:`rgb(${item.fillColor})`,backgroundColor:`rgb(${item.fillColor},0.15)`,color:`rgb(${item.textColor})`}"
						>{{item.type == 'rectangle' ? item.label : item.label.substring(0, 2)}}</text>
						<text class="time">更新时间：{{item.updateTime}}</text>
					</view>
					<view class="actionBox">
						<text class="redact">编辑</text>
						<text class="remove">删除</text>
					</view>
				</view>
			</view>
		</view>
		<button class="create" @click="createLabel">
			<uni-icons class="icon" type="plusempty" size="20" color="#fff"></uni-icons>
			<text class="title">创建</text>
		</button>
		
		<!--创建标识弹出层-->
		<uni-popup ref="labelPopup" background-color="#fff" border-radius="20rpx 20rpx 0rpx 0rpx">
			<view class="labelPopup">
				<view class="actionBar">
					<text class="title">创建标识</text>
					<uni-icons @click="$refs.labelPopup.close()" class="close" type="closeempty" size="22" color="rgb(150,150,150)"></uni-icons>
				</view>
				<view class="identificationType">
					<text class="title">
						<text>*</text>
						标识类型
					</text>
					<view class="detailsBox">
						<view>
							<view
								class="rectangle"
								:class="{check:labelType == 'rectangle'}"
								@click="labelType = 'rectangle'"
							>
								<text
									:style="{borderColor:`rgb(${fillColor})`,backgroundColor:`rgb(${fillColor},0.15)`,color:`rgb(${textColor})`}"
								>{{label}}</text>
							</view>
							<text class="tips">可设置4字以内文案</text>
						</view>
						<view>
							<view
								class="round"
								:class="{check:labelType == 'round'}"
								@click="labelType = 'round'"
							>
								<text
									:style="{borderColor:`rgb(${fillColor})`,backgroundColor:`rgb(${fillColor},0.15)`,color:`rgb(${textColor})`}"
								>{{label.substring(0, 2)}}</text>
							</view>
							<text class="tips">可设置2字以内文案</text>
						</view>
					</view>
				</view>
				<view class="fillColor">
					<text class="title">
						<text>*</text>
						填充颜色
					</text>
					<view class="detailsBox">
						<view class="colorBox" 
							v-for="(item,index) in fillColorData"
							:key="index"
							:class="{check:item ==  fillColor}"
							@click="fillColorCheck(item)"
						>
							<view class="color" :style="{ backgroundColor: `rgb(${item})` }"></view>
						</view>
					</view>
				</view>
				<view class="copywriting">
					<text class="title">
						<text>*</text>
						标识
					</text>
					<view class="detailsBox">
						<input type="text" v-model="label" placeholder="请输入内容" :maxlength="labelType == 'rectangle' ? 4 : 2"/>
					</view>
				</view>
				<view class="textColor">
					<text class="title">
						<text>*</text>
						文字颜色
					</text>
					<view class="detailsBox">
						<view class="colorBox"
							v-for="(item,index) in textColorData"
							:key="index"
							:class="{check:item ==  textColor}"
							@click="textColorCheck(item)"
						>
							<view class="color" :style="{ backgroundColor: `rgb(${item})` }"></view>
						</view>
					</view>
				</view>
				<button class="saveButton">保存</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				labelType:"rectangle",
				fillColorData:['254,163,158','254,214,145','182,235,143','143,203,255','211,173,248','255,173,211'],
				textColorData:['207,19,34','212,106,12','58,157,14','9,88,215','82,29,172','197,28,127'],
				fillColor:"254,163,158",
				textColor:"207,19,34",
				label:'',
				labelData:[
					{id:1,label:"重点监控",type:"rectangle",fillColor:"254,163,158",textColor:"207,19,34",updateTime:"2025-01-24 10:46:34"},
					{id:2,label:"重点监控",type:"round",fillColor:"254,214,145",textColor:"212,106,12",updateTime:"2025-01-24 10:46:34"},
				]
			}
		},
		methods:{
			createLabel(){
				this.$refs.labelPopup.open('bottom');
			},
			fillColorCheck(color)
			{
				if(color == this.fillColor) return;
				this.fillColor = color;
			},
			textColorCheck(color)
			{
				if(color == this.textColor) return;
				this.textColor = color;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox{
		width: 100%;
		position: absolute;
		top: 170rpx;
		bottom: 135rpx;
		.noData{
			width: 100%;
			height: 100%;
			float: left;
			image{
				width: 200rpx;
				height: 200rpx;
				position: relative;
				float: left;
				left: 50%;
				margin-left: -100rpx;
				margin-top: 50%;
			}
			text{
				width: 100%;
				float: left;
				text-align: center;
				color: rgb(158, 158, 158);
				font-size: 27rpx;
			}
		}
		.tableData{
			width: 100%;
			height: auto;
			float: left;
			padding-bottom: 25rpx;
			.itemBox{
				width: calc(100% - 100rpx);
				float: left;
				margin-top: 25rpx;
				margin-left: 25rpx;
				height: auto;
				padding: 25rpx;
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: 0rpx 0rpx 10rpx rgba(0,0,0,0.08);
				display: flex;
				.detailsBox{
					width: 73%;
					float: left;
					height: auto;
					.labelRectangle{
						width: 190rpx;
						height: 65rpx;
						background-color: rgb(245, 245, 245);
						float: left;
						border-radius: 8rpx;
						border-width: 1rpx;
						border-style: solid;
						border-color: rgb(225, 225, 225);
						line-height: 65rpx;
						text-align: center;
						font-size: 26rpx;
					}
					.labelRound{
						width: 90rpx;
						height: 90rpx;
						background-color: rgb(245, 245, 245);
						float: left;
						border-radius: 50%;
						border-width: 1rpx;
						border-style: solid;
						border-color: rgb(225, 225, 225);
						line-height: 90rpx;
						text-align: center;
						font-size: 26rpx;
					}
					.time{
						width: 100%;
						float: left;
						height: 30rpx;
						line-height: 30rpx;
						font-size: 25rpx;
						margin-top: 15rpx;
						color: rgb(156, 156, 156);
					}
				}
				.actionBox{
					flex: 1;
					float: right;
					display: grid;
					grid-template-columns: repeat(2,1fr);
					.redact,.remove{
						font-size: 28rpx;
						display: flex; 
						justify-content: center;
						align-items: center;
						background-color: #fff;
					}
					.redact::after,.remove::after{
						border-width: 0rpx;
					}
					.redact{
						color:rgb(62,99,176);
						// color: #ffbc04;
					}
					.remove{
						color: rgb(189,52,57);
					}
				}
			}
		}
	}
	.create{
		width: calc(100% - 60rpx);
		float: left;
		position: absolute;
		bottom: 40rpx;
		left: 30rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffbc04;
		.icon{
			margin-right: 6rpx;
		}
		.title{
			font-size: 30rpx;
			color: #fff;
			font-weight: bold;
		}
	}
	.labelPopup{
		width: 100%;
		height: auto;
		float: left;
		.actionBar{
			width: 100%;
			height: 90rpx;
			float: left;
			display: flex;
			align-items: center;
			.title{
				flex: 1;
				text-align: center;
				margin-left: 70rpx;
				float: left;
				font-size: 34rpx;
			}
			.close{
				width: 50rpx;
				height: 50rpx;
				float: right;
				margin-right: 20rpx;
			}
			
		}
		.identificationType{
			width: calc(100% - 40rpx);
			float: left;
			margin-left: 20rpx;
			height: 160rpx;
			margin-top: 10rpx;
			.title{
				width: 25%;
				float: left;
				height: 40rpx;
				text-align: right;
				line-height: 40rpx;
				font-size: 30rpx;
				color: rgb(54, 54, 54);
				text{
					color: red;
					margin-right: 5rpx;
					line-height: 45rpx;
				}
			}
			.detailsBox{
				width: 74%;
				height: 150rpx;
				float: right;
				display: grid;
				grid-template-columns: repeat(2,1fr);
				.rectangle,.round{
					width: calc(100% - 30rpx);
					height: 110rpx;
					background-color: rgb(245, 245, 245);
					margin-left: 10rpx;
					border-radius: 8rpx;
					border:1rpx dashed rgb(225, 225, 225);
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						border-width: 1rpx;
						border-style: solid;
						border-color: rgb(225, 225, 225);
						text-align: center;
						font-size: 26rpx;
					}
				}
				.rectangle{
					text{
						width: 80%;
						height: 70rpx;
						background-color:rgb(245, 245, 245);
						border-radius: 8rpx;
						line-height: 70rpx;
					}
				}
				.round{
					text{
						width: 90rpx;
						height: 90rpx;
						line-height: 90rpx;
						border-radius: 50%;
						background-color: rgb(245, 245, 245);
					}
				}
				.check{
					border-color: #ffbc04;
				}
				.tips{
					width: calc(100% - 30rpx);
					margin-left: 10rpx;
					font-size: 24rpx;
					text-align: center;
					float: left;
					margin-top: 5rpx;
					color: rgb(163,163,163);
				}
			}
		}
		.fillColor,.textColor{
			width: calc(100% - 40rpx);
			float: left;
			margin-left: 20rpx;
			height: 85rpx;
			margin-top: 10rpx;
			.title{
				width: 25%;
				float: left;
				height: 85rpx;
				text-align: right;
				line-height: 85rpx;
				font-size: 30rpx;
				color: rgb(54, 54, 54);
				text{
					color: red;
					margin-right: 5rpx;
					line-height: 90rpx;
				}
			}
			.detailsBox{
				width: 74%;
				float: right;
				height: 100%;
				display: grid;
				grid-template-columns: repeat(6,1fr);
				align-items: center;
				.colorBox{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					border:5rpx solid #fff;
					margin-left: 10rpx;
					.color{
						width: 54rpx;
						height: 54rpx;
						float: left;
						margin-top: 5rpx;
						margin-left: 5rpx;
						border-radius: 50%;
					}
				}
				.check{
					border-color: #ffbc04;
				}
			}
		}
		.copywriting{
			width: calc(100% - 40rpx);
			float: left;
			margin-left: 20rpx;
			height: 85rpx;
			margin-top: 10rpx;
			.title{
				width: 25%;
				float: left;
				height: 85rpx;
				text-align: right;
				line-height: 85rpx;
				font-size: 30rpx;
				color: rgb(54, 54, 54);
				text{
					color: red;
					margin-right: 5rpx;
					line-height: 90rpx;
				}
			}
			.detailsBox{
				width: 70%;
				float: right;
				height: 70rpx;
				margin-right: 3%;
				margin-top: 10rpx;
				background-color: #f5f5f5;
				border-radius: 8rpx;
				input{
					width: 90%;
					float: left;
					margin-left: 5%;
					height: 100%;
				}
			}
		}
		.saveButton{
			width: calc(100% - 60rpx);
			float: left;
			margin-left: 30rpx;
			margin-top: 20rpx;
			height: 85rpx;
			line-height: 85rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #fff;
			background-color: #ffbc04;
		}
		.saveButton::after{
			border-width: 0rpx;
		}
	}
</style>